<template>
  <h1>Vue2响应式的缺点</h1>
  <h2 v-if="person.name">姓名：{{ person.name }}</h2>
  <h2 v-if="person.sex">性别：{{ person.sex }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2 v-if="person.hobby">爱好：{{ person.hobby }}</h2>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除name属性</button>
  <button @click="update">更新爱好</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  components: {},

  methods: {},
  setup(props) {
    let person = reactive({
      name: "张三",
      age: 18,
      hobby: ["学习", "吃饭"],
    });
    const addSex = () => {
      // vue3这样修改 是响应式的。不用 vue 提供的方法。
      person.sex = "女";
      console.log(person);
    };
    const deleteName = () => {
      delete person.name
    };
    const update = () => {
      person.hobby[0] = "逛街";
    };
    return { person, addSex, deleteName, update };
  },
};
</script>

<style>
</style>
